<template>
  <div class="appraisal-home">
    <div class="container mx-auto px-4 py-6">
      <!-- 欢迎区域 -->
      <div class="welcome-section mb-8">
        <div class="bg-gradient-to-r from-teal-600 to-blue-600 rounded-lg p-6 text-white">
          <h1 class="text-2xl font-bold mb-2">鉴定部工作台</h1>
          <p class="text-teal-100">今天是 {{ formatToday() }}，您有 {{ pendingAppraisals }} 个案件待鉴定</p>
        </div>
      </div>

      <!-- 鉴定数据统计 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">待鉴定</p>
              <p class="text-3xl font-bold text-orange-600">{{ stats.pending }}</p>
            </div>
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-clock text-orange-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">鉴定中</p>
              <p class="text-3xl font-bold text-blue-600">{{ stats.inProgress }}</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-stethoscope text-blue-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">已完成</p>
              <p class="text-3xl font-bold text-green-600">{{ stats.completed }}</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-check-circle text-green-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">本月完成</p>
              <p class="text-3xl font-bold text-purple-600">{{ stats.monthlyCompleted }}</p>
            </div>
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-calendar-check text-purple-600"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- 紧急鉴定案件 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-800">紧急鉴定案件</h2>
          </div>
          <div class="p-6">
            <div class="space-y-4">
              <div v-for="case_ in urgentCases" :key="case_.id" class="p-4 border border-red-200 bg-red-50 rounded-lg">
                <div class="flex justify-between items-start mb-2">
                  <h3 class="font-medium text-gray-800">{{ case_.title }}</h3>
                  <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">紧急</span>
                </div>
                <p class="text-sm text-gray-600 mb-2">{{ case_.description }}</p>
                <div class="flex justify-between items-center text-sm">
                  <span class="text-gray-500">委托方：{{ case_.client }}</span>
                  <span class="text-red-600 font-medium">截止：{{ formatDate(case_.deadline) }}</span>
                </div>
                <button class="mt-3 w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition-colors"
                        @click="startAppraisal(case_)">
                  立即开始鉴定
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 今日任务 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-800">今日任务</h2>
          </div>
          <div class="p-6">
            <div class="space-y-4">
              <div v-for="task in todayTasks" :key="task.id" class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                  <div :class="getTypeColor(task.type)" class="w-3 h-3 rounded-full mr-3"></div>
                  <div>
                    <p class="font-medium text-gray-800">{{ task.title }}</p>
                    <p class="text-sm text-gray-600">{{ task.client }}</p>
                  </div>
                </div>
                <div class="text-right">
                  <p class="text-sm text-gray-500">{{ task.time }}</p>
                  <span :class="getStatusClass(task.status)" class="text-xs px-2 py-1 rounded">
                    {{ getStatusText(task.status) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 鉴定类型统计 -->
      <div class="mt-8">
        <div class="bg-white rounded-lg shadow-md p-6">
          <h2 class="text-lg font-bold text-gray-800 mb-4">鉴定类型分布</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div v-for="type in appraisalTypes" :key="type.name" class="text-center">
              <div class="relative mb-4">
                <div class="w-24 h-24 mx-auto">
                  <svg class="w-24 h-24 transform -rotate-90">
                    <circle cx="48" cy="48" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"></circle>
                    <circle 
                      cx="48" 
                      cy="48" 
                      r="40" 
                      :stroke="type.color" 
                      stroke-width="8" 
                      fill="none"
                      :stroke-dasharray="`${type.percentage * 2.51} 251`"
                      stroke-linecap="round"
                    ></circle>
                  </svg>
                  <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-xl font-bold">{{ type.percentage }}%</span>
                  </div>
                </div>
              </div>
              <h3 class="font-medium text-gray-800 mb-1">{{ type.name }}</h3>
              <p class="text-sm text-gray-600">{{ type.count }} 件</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速操作 -->
      <div class="mt-8">
        <h2 class="text-lg font-bold text-gray-800 mb-4">快速操作</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <router-link to="/appraisal/cases" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-tasks text-blue-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">案件管理</h3>
            <p class="text-sm text-gray-500 mt-1">三状态统一管理</p>
          </router-link>
          
          <router-link to="/appraisal/pending" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-clock text-orange-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">待处理案件</h3>
            <p class="text-sm text-gray-500 mt-1">快速查看待办</p>
          </router-link>
          
          <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center cursor-pointer" @click="generateReport">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-file-alt text-green-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">生成报告</h3>
            <p class="text-sm text-gray-500 mt-1">鉴定报告生成</p>
          </div>
          
          <router-link to="/appraisal/date-management" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-calendar-plus text-purple-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">日期管理</h3>
            <p class="text-sm text-gray-500 mt-1">排期安排管理</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

export default {
  name: 'AppraisalHome',
  setup() {
    const router = useRouter()
    const stats = ref({
      pending: 12,      // 待鉴定交通事故案件
      inProgress: 8,    // 正在鉴定的交通事故案件
      completed: 36,    // 已完成交通事故鉴定
      monthlyCompleted: 48  // 本月完成交通事故鉴定
    })
    
    const urgentCases = ref([
      {
        id: 1,
        title: '重大交通事故伤残鉴定',
        description: '高速公路多车相撞事故，需紧急鉴定伤残等级和三期费用',
        client: '张先生',
        deadline: '2024-01-22'
      },
      {
        id: 2,
        title: '酒驾肇事死亡鉴定',
        description: '酒驾肇事案件，需鉴定死亡原因和因果关系',
        client: '李女士',
        deadline: '2024-01-20'
      },
      {
        id: 3,
        title: '电动车事故护理依赖鉴定',
        description: '电动车与汽车碰撞，老人重伤需鉴定护理依赖程度',
        client: '王老伯',
        deadline: '2024-01-25'
      }
    ])
    
    const todayTasks = ref([
      {
        id: 1,
        title: '交通事故伤残等级鉴定',
        client: '赵先生',
        time: '09:00',
        type: 'traffic',
        status: 'scheduled'
      },
      {
        id: 2,
        title: '车辆财产损失鉴定',
        client: '刘女士',
        time: '10:30',
        type: 'vehicle',
        status: 'in-progress'
      },
      {
        id: 3,
        title: '交通事故三期鉴定',
        client: '陈先生',
        time: '14:00',
        type: 'periods',
        status: 'completed'
      },
      {
        id: 4,
        title: '肇事逃逸因果关系鉴定',
        client: '孙女士',
        time: '16:00',
        type: 'causality',
        status: 'scheduled'
      }
    ])
    
    const appraisalTypes = ref([
      { name: '交通事故人身损害', count: 52, percentage: 68, color: '#3b82f6' },
      { name: '车辆财产损失', count: 16, percentage: 21, color: '#10b981' },
      { name: '交通事故因果关系', count: 8, percentage: 11, color: '#f59e0b' }
    ])
    
    const pendingAppraisals = computed(() => {
      return stats.value.pending + stats.value.inProgress
    })
    
    const formatToday = () => {
      return dayjs().format('YYYY年MM月DD日 dddd')
    }
    
    const formatDate = (date) => {
      return dayjs(date).format('MM-DD')
    }
    
    const getTypeColor = (type) => {
      const colors = {
        traffic: 'bg-blue-500',     // 交通事故
        vehicle: 'bg-green-500',    // 车辆损失
        periods: 'bg-orange-500',   // 三期鉴定
        causality: 'bg-purple-500'  // 因果关系
      }
      return colors[type] || 'bg-gray-500'
    }
    
    const getStatusClass = (status) => {
      const classes = {
        scheduled: 'bg-yellow-100 text-yellow-800',
        'in-progress': 'bg-blue-100 text-blue-800',
        completed: 'bg-green-100 text-green-800'
      }
      return classes[status] || 'bg-gray-100 text-gray-800'
    }
    
    const getStatusText = (status) => {
      const texts = {
        scheduled: '已预约',
        'in-progress': '进行中',
        completed: '已完成'
      }
      return texts[status] || '未知'
    }
    
    const startAppraisal = (case_) => {
      // 导航到鉴定流程页面，传递案件ID
      router.push(`/appraisal/identification/${case_.id}`)
    }
    
    const generateReport = () => {
      alert('生成鉴定报告功能开发中...')
    }
    
    const scheduleAppointment = () => {
      alert('预约管理功能开发中...')
    }
    
    return {
      stats,
      urgentCases,
      todayTasks,
      appraisalTypes,
      pendingAppraisals,
      formatToday,
      formatDate,
      getTypeColor,
      getStatusClass,
      getStatusText,
      startAppraisal,
      generateReport,
      scheduleAppointment
    }
  }
}
</script>

<style scoped>
.appraisal-home {
  padding: 20px 0;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 20px;
}

.home-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 